<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div id="uiContainer">
      <div id="ui">
        <div id="x"></div>
        <div id="y"></div>
        <div id="angle"></div>
        <div id="scaleX"></div>
        <div id="scaleY"></div>
      </div>
    </div>
    <!-- vertex shader -->
    <script
      id="vertex-shader-2d"
      type="x-shader/x-vertex"
    >
      attribute vec2 a_position;

      uniform mat3 u_matrix;

      varying vec4 v_color;

      void main() {

        gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);

        v_color = gl_Position * 0.5 + 0.5;
      }
    </script>
    <!-- fragment shader -->
    <script
      id="fragment-shader-2d"
      type="x-shader/x-fragment"
    >
      precision mediump float;

      varying vec4 v_color;

      void main() {
        gl_FragColor = v_color;
      }
    </script>

    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/m3.js"></script>
    <script src="3.js"></script>
  </body>
</html>
